<template>
  <div class="bottom-view">
      <div class="bottom-head">
          <div class="b-left">
              <h3>关 于 我 们</h3>
              <h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae eros eget tellus tristique bibendum.</h5>
              <ul class="left-ul">
                  <li><img src="http://192.168.2.27:8888/assets/img/fb.png" alt=""></li>
                  <li><img src="http://192.168.2.27:8888/assets/img/tt.png" alt=""></li>
                  <li><img src="http://192.168.2.27:8888/assets/img/ins.png" alt=""></li>
              </ul>
          </div>
          <div class="b-center">
              <h3>NEED HELP ?</h3>
              <ul class="center-ul">
                  <li><a href="#home">HOME</a></li>
                  <li><a href="#center">PRODUCT</a></li>
                  <li><a href="#about">ABOUT</a></li>
                  <li><a href="#car">CAR DEALS</a></li>
              </ul>
          </div>
          <div class="b-right">
              <h3>SAY HELLO</h3>
              <el-row :gutter="20" class="top-row">
                <el-col :span="12">
                    <span class="span-name">姓名:</span>
                    <el-input v-model="usercommitinfo.inputname" placeholder="input name" />
                    <!-- <div style="background-color: blue">111</div> -->
                </el-col>
                <el-col :span="12">
                    <span class="span-email">邮箱地址:</span>
                    <el-input v-model="usercommitinfo.inputemail" placeholder="input email"/>
                </el-col>
              </el-row>
              <el-row>
                  <el-col :span="24">
                    <h4 style="display: block">建议:</h4>
                    <el-input
                        :rows="2"
                        v-model="usercommitinfo.commit"
                        maxlength="50"
                        type="textarea"
                        placeholder="Please input"
                        show-word-limit
                    />
                  </el-col>
              </el-row>
              <el-row>
                  <el-col :span="12">
                    <el-button type="danger" @click="sumbitinfo()">发 送</el-button>
                    <router-link to="/admin"><span>信息列表</span></router-link>
                  </el-col>
              </el-row>
          </div>
      </div>
  </div>
</template>

<script>
import { ElMessage } from 'element-plus'
import { usermessagepush } from 'network/request.js'
// import {
//   Search
// } from "@element-plus/icons-vue";
export default {
    components: {
        // Search
    },
    data() {
        return {
            usercommitinfo: {
                commit: '',
                inputname: '',
                inputemail: ''
            }

        }
    },
    methods: {
        sumbitinfo() {
            // let emailReg = new RegExp(/^\w+[-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/)
            console.log()
            if(this.usercommitinfo.commit=='' || this.usercommitinfo.inputname=='' || this.usercommitinfo.inputemail=='') {
                ElMessage.error('请填写相关信息!')
            }
            else if(!/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/g.test(this.usercommitinfo.inputemail)){
                ElMessage.error('请填写正确的邮箱!')
            }
            else{
                usermessagepush(this.usercommitinfo.inputname,this.usercommitinfo.inputemail,this.usercommitinfo.commit)
                ElMessage.success('发送成功!我们会尽快处理您的信息!')
            }
            this.usercommitinfo.commit = ''
            this.usercommitinfo.inputname = ''
            this.usercommitinfo.inputemail = ''
        }
    }
}
</script>

<style scoped>
.el-col>span {
    font-size: 14px;
}
.el-button {
    width: 93%;
    margin-top: 10px;
}
.b-right h4 {
    color: white;
    margin-top: 4px;
}
a{
    text-decoration: none;
    color: rgb(99, 99, 99); 
}
.bottom-view {
    margin-top: 5px;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.897);
    width: 100%;
}
.bottom-head {
    max-width: 1100px;
    height: 280px;
    margin: 0 auto;
    display: flex;
}
.bottom-head>div{
    box-sizing: border-box;
    height: 85%;
    margin-top: 20px;
    flex:1;
}
.bottom-head>div>h3 {
    margin-top: 10px;
    max-width: 300px;
    height: 50px;
    line-height: 50px;
    font-weight: 800;
    color:white;
}
.b-left h5 {
    margin-top: 10px;
    max-width: 280px;
    height: 95px;
    font-size: 14px;
    color:rgb(99, 99, 99); 
    overflow: hidden;   
    text-overflow:ellipsis;
}
.left-ul {
    list-style: none;
    display: flex;
    max-width: 200px;
    height: 45px;
    text-align: center;
}
.left-ul li {
    margin-right: 20px;
    border-radius: 50%;
    max-width: 45px;
    height: 45px;
    padding-top: 5px;
    box-sizing: border-box;
}
.left-ul li img {
    width: 80%;
    vertical-align: top;
}
.center-ul {
    list-style: none;
    color: white;
    margin-top: 10px;
    box-sizing: border-box;
}
.center-ul li {
    max-width: 100px;
    height: 30px;
    line-height: 30px;
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: 600;
    color:rgb(99, 99, 99);  
}
.left-ul li:nth-child(1):hover {
    transform: scale(1); 
    transition: 0.5s linear; 
    background-color: #3b5998;
}
.left-ul li:nth-child(2):hover {
    transform: scale(1); 
    transition: 0.5s linear; 
    background-color: rgb(39,169,223);
}
.left-ul li:nth-child(3):hover {
    transform: scale(1); 
    transition: 0.5s linear; 
    background: url('assets/img/pinkback.jpg') no-repeat center center;
}
</style>